﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Main.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Report On Year
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<!--  start page-heading -->
<div id="page-heading"><h1>Report On Year</h1></div>
<!-- end page-heading -->

<table border="0" cellpadding="0" cellspacing="0" id="content-table" width="100%">
<tbody>
<tr>
    <th rowspan="3" class="sized"><img src="/Content/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
    <th class="topleft"></th>
    <td id="tbl-border-top">&nbsp;</td>
    <th class="topright"></th>
    <th rowspan="3" class="sized"><img src="/Content/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
    <td id="tbl-border-left"></td>
    <td>
        
        <!--  start content-table-inner -->
        <div id="content-table-inner" style="margin-top:10px; font-size:larger;">
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
	    <tbody>
        <tr valign="top">
	        <td valign="top">	
            <input type="hidden" id="ProjectId" name="ProjectId" />          
            <div style="width:100%; height:600px; margin-left:10px;">
                <div style="margin-left:10px; font-size:16px; line-height:30px; margin-bottom:10px;">Search Project: <input type="text" id="ProjectName" name="ProjectName" class="inp-form" style="margin:10px" /></div>           
		        <div id="DefectOnThisYear" style="width: 100%; height: 500px;"></div>         
            </div>	                    
        </td>
        </tr>
        <tr>
            <td><img height="1" width="695" alt="blank" src="/Content/images/shared/blank.gif"></td>
            <td></td>
        </tr>
        </tbody>
        </table>
 
        <div class="clear"></div>

        </div>
        <!--  end content-table-inner  -->
    </td>
    <td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</tbody>
</table>

<div class="clear">&nbsp;</div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Fotter" runat="server">
<img id="loading" src="/Content/images/shared/loading51.gif" alt="loading" width="100" height="100" style="z-index: 3333; display: none; position:absolute" />
<script type="text/javascript">
    $("#tabs").tabs();

    $("#loading").ajaxStart(function () {
        $(this).center();
        $(this).show();
    });

    $("#loading").ajaxStop(function () {
        $(this).hide();
    });
</script>
<script src="/Scripts/Highchart/highcharts.js" type="text/javascript"></script>
<script src="/Scripts/Highchart/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">

    var data;

    var masterChart, detailChart, detailData;

    var detailStart;

	var options = {

	    chart: {
	        renderTo: 'master-container',
	        reflow: false,
	        borderWidth: 0,
	        backgroundColor: null,
	        marginLeft: 50,
	        marginRight: 20,
	        zoomType: 'x'     
	    },
	    title: {
	        text: null
	    },
	    xAxis: {
	        type: 'datetime',
	        showLastTickLabel: true,
	        maxZoom: 14 * 24 * 3600000, // fourteen days
	        plotBands: [{
	            id: 'mask-before',
	            from: Date.UTC(2006, 0, 1),
	            to: Date.UTC(2008, 7, 1),
	            color: 'rgba(0, 0, 0, 0.2)'
	        }],
	        title: {
	            text: null
	        }
	    },
	    yAxis: {
	        gridLineWidth: 0,
	        labels: {
	            enabled: false
	        },
	        title: {
	            text: null
	        },
	        min: 0.6,
	        showFirstLabel: false
	    },
	    tooltip: {
	        formatter: function () {
	            return false;
	        }
	    },
	    legend: {
	        enabled: false
	    },
	    credits: {
	        enabled: false
	    },
	    plotOptions: {
	        series: {
	            fillColor: {
	                linearGradient: [0, 0, 0, 70],
	                stops: [
										[0, '#4572A7'],
										[1, 'rgba(0,0,0,0)']
									]
	            },
	            lineWidth: 1,
	            marker: {
	                enabled: false
	            },
	            shadow: false,
	            states: {
	                hover: {
	                    lineWidth: 1
	                }
	            },
	            enableMouseTracking: false
	        }
	    },

	    series: [{
	        type: 'area',
	        name: "Defect Tracking System",
	        pointInterval: 24 * 3600 * 1000,
	        pointStart: Date.UTC(2006, 0, 01),
	        data: data
	    }],

	    exporting: {
	        enabled: false
	    }
	};

	var options2 = {
	    chart: {
	        marginBottom: 120,
	        renderTo: 'detail-container',
	        reflow: false,
	        marginLeft: 50,
	        marginRight: 20,
	        style: {
	            position: 'absolute'
	        }
	    },
	    credits: {
	        enabled: false
	    },
	    title: {
	        text: 'Defect Tracking System Report'
	    },
	    xAxis: {
	        type: 'datetime'
	    },
	    yAxis: {
	        title: null,
	        maxZoom: 0.1
	    },
	    tooltip: {
	        formatter: function () {
	            var point = this.points[0];
	            return '<b>' + point.series.name + '</b><br/>' +
								Highcharts.dateFormat('%A %B %e %Y', this.x) + ': ' + Highcharts.numberFormat(point.y) + ' open defects';
	        },
	        shared: true
	    },
	    legend: {
	        enabled: false
	    },
	    plotOptions: {
	        series: {
	            marker: {
	                enabled: false,
	                states: {
	                    hover: {
	                        enabled: true,
	                        radius: 3
	                    }
	                }
	            }
	        }
	    },
	    series: [{
	        name: 'Defect tracking System',
	        pointStart: detailStart,
	        pointInterval: 24 * 3600 * 1000,
	        data: detailData
	    }],

	    exporting: {
	        enabled: false
	    }
	};

    // create the detail chart
	function createDetail(masterChart) {
	    // prepare the detail chart
	    var detailData = [];

	    jQuery.each(masterChart.series[0].data, function (i, point) {
	        if (point.x >= detailStart) {
	            detailData.push(point.y);
	        }
	    });

	    // create a detail chart referenced by a global variable
	    detailChart = new Highcharts.Chart(options2);
	}

    $("#ProjectName").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Project/Search",
                type: "POST",
                dataType: "json",
                data: {
                    Keyword: request.term,
                    ReturnType: "json"
                },
                success: function (projects) {
                    response($.map(projects, function (project) {
                        return {
                            label: project.Name,
                            value: project.Name,
                            projectId: project.Id
                        }
                    }));
                }
            });
        },

        minLength: 1,
        select: function (event, ui) {

        $("#ProjectId").val(ui.item.projectId);

            LoadLineChart("DefectOnThisYear", "DefectOnThisYear", null, null);
        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });

    function LoadLineChart(TypeReport, Container, Form, To) {

        $.ajax({

            url: "/Report/ProjectReportWithDate",
            type: "POST",
            dataType: "json",
            data: {
                TypeReport: TypeReport,
                ProjectId: $("#ProjectId").val(),
                From: Form,
                To: To
            },
            success: function (data) {

                options.xAxis.plotBands[0].from = Date.UTC(data.FromYear, data.FromMonth - 1, data.FromDay);
                options.xAxis.plotBands[0].to = Date.UTC(data.ToYear, data.ToMonth - 1, data.ToDay);
                options.series[0].pointStart = Date.UTC(data.FromYear, data.FromMonth - 1, data.FromDay);
                options.series[0].name = $("#ProjectName").val();
                options2.series[0].name = $("#ProjectName").val();
                detailStart = Date.UTC(data.ToYear, data.ToMonth - 3, data.ToDay);

                options.chart.events = {

                    // listen to the selection event on the master chart to update the 
                    // extremes of the detail chart
                    selection: function (event) {

                        var extremesObject = event.xAxis[0],
										min = extremesObject.min,
										max = extremesObject.max,
										detailData = [],
										xAxis = this.xAxis[0];

                        // reverse engineer the last part of the data
                        jQuery.each(this.series[0].data, function (i, point) {
                            if (point.x > min && point.x < max) {
                                detailData.push({
                                    x: point.x,
                                    y: point.y
                                });
                            }
                        });

                        // move the plot bands to reflect the new detail span
                        xAxis.removePlotBand('mask-before');
                        xAxis.addPlotBand({
                            id: 'mask-before',
                            from: Date.UTC(data.FromYear, data.FromMonth - 1, data.FromDay),
                            to: min,
                            color: 'rgba(0, 0, 0, 0.2)'
                        });

                        xAxis.removePlotBand('mask-after');
                        xAxis.addPlotBand({
                            id: 'mask-after',
                            from: max,
                            to: Date.UTC(data.ToYear, data.ToMonth - 1, data.ToDay),
                            color: 'rgba(0, 0, 0, 0.2)'
                        });


                        detailChart.series[0].setData(detailData);

                        return false;
                    }
                };

                options.series[0].data = data.Data;

                // make the container smaller and add a second container for the master chart
                var $container = $('#DefectOnThisYear')
					.css('position', 'relative');

                var $detailContainer = $('<div id="detail-container">')
					.appendTo($container);

                var $masterContainer = $('<div id="master-container">')
					.css({ position: 'absolute', top: 300, height: 80, width: '100%' })
					.appendTo($container);

                // create master and in its callback, create the detail chart
                chart = new Highcharts.Chart(
                    options,
                    function (masterChart) {
                        createDetail(masterChart)
                    }
                );
            }
        });
    }						

</script>
</asp:Content>
